<template>
  <div class="bullet-trend-chart-mini">
    <div class="chart-container" ref="chartContainer">
      <!-- 迷你图表将在这里渲染 -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import type { BulletPredictItem } from '@/types/bulletPrice'

// Props
const props = defineProps<{
  item: BulletPredictItem
}>()

// 响应式数据
const chartContainer = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

// 初始化图表
const initChart = () => {
  if (!chartContainer.value) return

  chartInstance = echarts.init(chartContainer.value)
  
  // 设置图表配置
  const option = getChartOption()
  chartInstance.setOption(option)

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
}

// 获取图表配置
const getChartOption = () => {
  if (!props.item || !props.item.price_history.length) {
    return getEmptyChartOption()
  }

  // 处理价格历史数据
  const priceHistory = props.item.price_history
    .slice()
    .sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())

  const dates = priceHistory.map(item => {
    const date = new Date(item.timestamp)
    return `${date.getMonth() + 1}/${date.getDate()}`
  })
  
  const prices = priceHistory.map(item => item.price)
  const predictPrice = props.item.predict_price

  // 添加预测点
  const today = new Date()
  const tomorrow = new Date(today)
  tomorrow.setDate(tomorrow.getDate() + 1)
  
  dates.push(`${tomorrow.getMonth() + 1}/${tomorrow.getDate()}`)
  prices.push(predictPrice)

  return {
    grid: {
      left: '5%',
      right: '5%',
      top: '10%',
      bottom: '10%'
    },
    xAxis: {
      type: 'category',
      data: dates,
      show: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        name: '价格',
        type: 'line',
        data: prices,
        smooth: true,
        lineStyle: {
          width: 2,
          color: '#409eff'
        },
        itemStyle: {
          color: '#409eff',
          borderWidth: 0
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(64, 158, 255, 0.3)'
              },
              {
                offset: 1,
                color: 'rgba(64, 158, 255, 0.05)'
              }
            ]
          }
        },
        symbol: 'none',
        markPoint: {
          data: [
            {
              name: '预测',
              coord: [dates.length - 1, predictPrice],
              itemStyle: {
                color: '#f0a020'
              },
              symbol: 'circle',
              symbolSize: 6
            }
          ]
        }
      }
    ]
  }
}

// 获取空图表配置
const getEmptyChartOption = () => {
  return {
    grid: {
      left: '5%',
      right: '5%',
      top: '10%',
      bottom: '10%'
    },
    xAxis: {
      show: false
    },
    yAxis: {
      show: false
    },
    series: []
  }
}

// 更新图表
const updateChart = () => {
  if (!chartInstance) return
  
  const option = getChartOption()
  chartInstance.setOption(option, true)
}

// 处理窗口大小变化
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 监听props变化
watch(() => props.item, () => {
  nextTick(() => {
    updateChart()
  })
}, { deep: true })

// 组件挂载
onMounted(() => {
  nextTick(() => {
    initChart()
  })
})

// 组件卸载
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.bullet-trend-chart-mini {
  width: 100%;
  height: 100%;
  min-height: 80px;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>
